<template>
	<view class="page">

		<!-- 背景 -->
		<image class="page-bg" mode="widthFix" :src="imageUrl +'list/g-bg.jpg'"></image>

		<!-- 头部 -->
		<u-sticky offset-top="0" :bgColor="bgColor">
			<u-navbar leftText="现在预约" title=" " @rightClick="rightClick" :autoBack="true" placeholder :safeAreaInsetTop="true" :bgColor="bgColor"></u-navbar>
		</u-sticky>

		<!-- 主内容 -->
		<view class="page-content">
			<view class="wp">
				<view class="box-hg3">
					<image class="bg" mode="widthFix" :src="imageUrl +'hg-bg4.png'"></image>
					<image class="car" mode="widthFix" :src="imageUrl +'hg-car1.png'"></image>
					<view class="top">
						<view class="t1">支付倒计时02:17</view>
						<view class="t2">鄂E·12345</view>
						<image class="icon" mode="widthFix" :src="imageUrl +'hg-rz1.png'"></image>
					</view>
					<view class="cont">
						<view class="t1">预约信息</view>
						<view class="t2">
							<view class="t2-item">
								<view class="t2-l">停车场</view>
								<view class="t2-r">
									夷陵市属公园-1号停车场
									<image class="icon" mode="widthFix" :src="imageUrl +'hg-addr2.png'"></image>
								</view>
							</view>
							<view class="t2-item">
								<view class="t2-l">入场时间</view>
								<view class="t2-r">2025-09-03 15:30</view>
							</view>
							<view class="t2-item">
								<view class="t2-l">出场时间</view>
								<view class="t2-r">2025-09-03 17:30</view>
							</view>
							<view class="t2-item">
								<view class="t2-l">手机号</view>
								<view class="t2-r">18888888888</view>
							</view>
						</view>
						<view class="total">
							总额
							<view class="price">￥<view class="num">40.00</view></view>
						</view>
					</view>
				</view>
				<view class="box-hg2 v2">
					<view class="top-hg1">
						<view class="t1">支付方式</view>
					</view>
					<view class="lst-hg3">
						<view class="item" @click="payIndex=0" :class="payIndex==0?'on':''">
							<image class="icon" mode="widthFix" :src="imageUrl + 'hg-icon7.png'"></image>
							<view class="t1">微信支付</view>
							<image v-if="payIndex!=0" class="arrow" mode="widthFix" :src="imageUrl + 'hg-chk1.png'"></image>
							<image v-if="payIndex==0" class="arrow" mode="widthFix" :src="imageUrl + 'hg-chk2.png'"></image>
						</view>
						<view class="item" @click="payIndex=1" :class="payIndex==1?'on':''">
							<image class="icon" mode="widthFix" :src="imageUrl + 'hg-icon8.png'"></image>
							<view class="t1">钱包支付(￥100)</view>
							<image v-if="payIndex!=1" class="arrow" mode="widthFix" :src="imageUrl + 'hg-chk1.png'"></image>
							<image v-if="payIndex==1" class="arrow" mode="widthFix" :src="imageUrl + 'hg-chk2.png'"></image>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部 -->
		<view class="fot-hg2">
			<view class="wp">
				<view class="left">
					总额
					<view class="price">￥<view class="num">40.00</view></view>
				</view>
				<view class="right">
					<view class="a1" @click="popShow1=true">确认支付</view>
				</view>
			</view>
		</view>

		<!-- 弹窗 -->
		<u-popup
			:show="popShow1"
			mode="center"
			bgColor="transparent"
			closeable
			@close="popShow1=false"
		>
			<view class="popWin-hg2">
				<image class="bg" mode="widthFix" :src="imageUrl + 'hg-bg2.png'"></image>
				<image class="state-icon" mode="widthFix" :src="imageUrl + 'hg-icon9.png'"></image>
				<view class="tit">等待审核</view>
				<view class="desc">请耐心等待审核结果，如审核未通过缴费会原路退还，请知悉</view>
				<view class="btns">
					<view class="item a1" @click="go('/pages/parkingReservationState1/parkingReservationState1')">返回预约首页</view>
				</view>
			</view>
		</u-popup>

	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				// 头部背景色
				bgColor: 'transparent',

				// 支付方式
				payIndex: 0,

				// 等待审核弹窗
				popShow1: false

			}
		},
		onLoad() {

		},
		methods: {
			// 头部滚动
			onPageScroll(res) {
				if (res.scrollTop >= 60) {
					this.bgColor = '#ffffff'
				} else {
					this.bgColor = 'transparent'
				}
			},
			go(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">

page{
	padding-bottom: calc(constant(safe-area-inset-bottom) + 168rpx);
	padding-bottom: calc(env(safe-area-inset-bottom) + 168rpx);
}

.page{
	min-height: calc(100vh - env(safe-area-inset-bottom) - 168rpx);
}

</style>